<script setup>
import asides from './conponents/aside.vue';
import { RouterView, useRoute } from 'vue-router'
import {ref} from 'vue'
const meuaActive=ref(true)
const route = useRoute()
</script>

<template>
    <div class="flex">
        <div class="admin-main">
            <RouterView :key="route.fullPath" v-model="meuaActive"/>
        </div>
    </div>
</template>

<style scoped lang="less">
@keyframes muea-active {
    0%{
        width: 0px;
        min-width: 0px;
    }
    100%{
        width: 150px;
        min-width: 150px;
    }
}
@keyframes muea-close {
    0%{
        width: 150px;
        min-width: 150px;
    }
    100%{
        width: 0px;
        min-width: 0px;
    }
}
.v-enter-active,
.v-leave-active {
    animation: muea-active 0.5s;
}

.v-enter-from,
.v-leave-to {
    animation: muea-close 0.5s;
}
.admin-aside {
    width: 150px;
    min-width: 150px;
    border-right: solid 1px var(--el-menu-border-color);
    overflow-x: hidden;
    transition: all 0.5s;
}

.admin-layout {
    width: 100%;
}

.admin-main {
    width: 100%;
    height: calc(100vh - 40px);
}
</style>